<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">

    <title>行业</title>
    <style>


        .placeholder-top {
            background: rgba(255, 255, 255, 0);
            z-index: 5;
        }

        .topic-detail-head {
            height: 3.58rem;
            width: 7.5rem;
        }

        .topic-detail-img {
            height: 3.58rem;
        }

        .topic-detail-img img {
            width: 100%;
            height: 3.58rem;
        }

        .topic-detail-bg {
            top: 0;
            left: 0;
            width: 100%;
            height: 3.58rem;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .topic-detail-info {
            width: 100%;
            top: 1.74rem;
            left: 0;
            padding: 0 .32rem;
        }

        .topic-detail-title {
            color: rgba(255, 255, 255, 1);
        }

        .industry-tip-info {
            top: -0.72rem;
            padding-left: 0.32rem;
            background: linear-gradient(270deg, rgba(253, 153, 42, 1) 0%, rgba(234, 134, 23, 1) 100%);
            width: 7.5rem;
            height: 0.72rem;
            line-height: 0.72rem;
        }

        .industry-tip-icon {
            color: rgba(255, 255, 255, 0.7)
        }

        .industry-bond-info {
            padding-top: 0.36rem;
        }

        .industry-icon-style {
            height: 0.8rem;
            width: 1.74rem
        }

        .industry-bond-content {
            top: -0.4rem;
        }

        .industry-bond-left {
            background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 149, 36, 1) 100%);
            width: 0.72rem;
            height: 0.04rem;
        }

        .industry-bond-right {
            width: 0.72rem;
            height: 0.04rem;
            background: linear-gradient(90deg, rgba(255, 149, 36, 1) 0%, rgba(255, 255, 255, 1) 100%);
        }

        .industry-main-info {
            padding: 0 0.32rem;
        }

        .industry-main-tab {
            z-index: 1;
            background: rgba(255, 229, 202, 1);
            width: 1.36rem;
            text-align: center;
            line-height: 0.48rem;
            height: 0.48rem;
            color: #FB6521;
            border-radius: 0.12rem 0px 0.12rem 0px;
        }

        .industry-tab-list {
            padding: 0.28rem 0.2rem;
            background-color: #FFF8EE;
            top: -0.2rem
        }

        .industry-tab-name {
            color: rgba(34, 34, 34, 0.45);
        }

        .industry-tab-count {
            margin-left: 0.16rem;
        }

        .industry-chart-tab {
            width: 2.16rem;
            padding: 0.1rem 0;
            background-color: #F5F5F5;
            border-radius: 0.04rem;
            text-align: center;
            color: rgba(34, 34, 34, 0.7)
        }

        .industry-chart-active {
            background-color: #4E7EF4;
            color: white;
        }

        .industry-data-container {
            height: 5.32rem;
            width: 100%;
            margin-top: 0.28rem;
        }

        .industry-data-item {
            height: 5rem;
            width: 100%;
        }

        .industry-data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .industry-data-first {
            border-bottom: 1px solid #f6f6f6;
            color: rgba(34, 34, 34, 0.6);
        }

        .industry-first-td {
            padding-bottom: 0.24rem;
            width: 3.4rem;
            max-width: 4rem;
        }

        .industry-data-tr {
            border-bottom: 1px solid #f6f6f6;
            color: #222222
        }

        .industry-data-pj {
            padding-bottom: 0.24rem;
        }

        .industry-data-mc {
            width: 3.4rem;
            max-width: 4rem;
        }

        .industry-fiqs-more {
            color: rgba(34, 34, 34, 0.7);
            text-align: center;
            height: 0.5rem;
            width: 2rem;
        }

        .industry-div-line {
            width: 100%;
            height: 0.18rem;
            background-color: #F4F4F7;
        }

        .industry-more-tip {
            height: 1.5rem;
            width: 7.5rem;
            background-color: #F7F8FA;
        }

        .industry-more-info {
            color: rgba(34, 34, 34, 0.45);
            margin-top: 0.44rem
        }

        .industry-more-jt {
            color: #4177FF;
        }

    </style>
</head>
<body>

<div class="flex-column h-100-p">
    <!--状态栏-->
    <div class="placeholder-top flex-column pos-f">
        <!--状态栏-->
        <div class="status-bar"></div>
        <!--标题栏-->
        <div class="nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()" style="color: #FFFFFF;">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1"></div>
            <div class="right-bar" style="color: #FFFFFF;">
                <!--<span class="iconfont iconfenxiang1 fs16"></span>-->
            </div>
        </div>
    </div>

    <div id="mescroll" class="mescroll flex-1 bg-white">
        <div class="topic-detail-head pos-r">
            <div class="topic-detail-img"><img src="" alt=""></div>
            <div class="flex-column topic-detail-info pos-a align-items-center">
                <div class="topic-detail-title fs20 ff600 line1"></div>

            </div>
        </div>

        <div class="industry-bond-info flex-column bg-white align-items-center">
            <div class="industry-icon-style"><img class="h-100-p w-100-p" src="../../images/research/industry-bond.png"></div>
            <div class="industry-bond-content flex-row align-items-center justify-content-center pos-r">
                <div class="industry-bond-left"></div>
                <div class="ml15 mr15 c-222 fs18 ff600">债券</div>
                <div class="industry-bond-right"></div>
            </div>
        </div>
        <div class="industry-main-info flex-column">
            <div class="industry-main-tab fs12 ff500 pos-r">债券分析</div>
            <div class="industry-tab-list fs13 pos-r">
                <div class="flex-row mb5">
                    <div class="w-55-p">
                        <span class="industry-tab-name">存量债券数量</span>
                        <span class="industry-tab-count c-222"></span>
                    </div>
                    <div class="w-45-p">
                        <span class="industry-tab-name">加权到期收益率</span>
                        <span class="industry-tab-count c-222"></span>
                    </div>
                </div>
                <div class="flex-row mb5">
                    <div class="w-55-p">
                        <span class="industry-tab-name">存量债券规模</span>
                        <span class="industry-tab-count c-222"></span>
                    </div>
                    <div class="w-45-p">
                        <span class="industry-tab-name">平均久期</span>
                        <span class="industry-tab-count c-222"></span>
                    </div>
                </div>
                <div class="mb5">
                    <span class="industry-tab-name">近一年到期债券数量</span>
                    <span class="industry-tab-count c-222"></span>
                </div>
                <div class="mb5">
                    <span class="industry-tab-name">近一年到期规模</span>
                    <span class="industry-tab-count c-222"></span>
                </div>
                <div>
                    <span class="industry-tab-name">AA级以上债券数量及占比</span>
                    <span class="industry-tab-count c-222"></span>
                </div>
            </div>

            <div class="industry-charts-tab industry-charts-bond flex-row justify-content-between mt10">
                <!--<div class="industry-chart-tab industry-chart-active">久期分布</div>-->
                <!--<div class="industry-chart-tab">利差分布</div>-->
                <!--<div class="industry-chart-tab">FIQS评级</div>-->
            </div>
            <div class="industry-data-container industry-data-bond">


            </div>

        </div>

        <div class="industry-div-line"></div>

        <div class="industry-bond-info flex-column bg-white align-items-center">
            <div class="industry-icon-style"><img class="h-100-p w-100-p" src="../../images/research/industry-stock.png"></div>
            <div class="industry-bond-content flex-row align-items-center justify-content-center pos-r">
                <div class="industry-bond-left"></div>
                <div class="ml15 mr15 c-222 fs18 ff600">股票</div>
                <div class="industry-bond-right"></div>
            </div>
        </div>
        <div class="industry-main-info flex-column">
            <div class="industry-main-tab fs12 ff500 pos-r">股票分析</div>
            <div class="industry-tab-list fs13 pos-r">
                <div class="flex-row mb5">
                    <div class="w-55-p">
                        <span class="industry-tab-name">上市公司数</span>
                        <span class="industry-tab-count c-222"></span>
                    </div>
                    <div class="w-45-p">
                        <span class="industry-tab-name">总市值</span>
                        <span class="industry-tab-count c-222"></span>
                    </div>
                </div>
                <div class="mb5">
                    <span class="industry-tab-name">PB(LF)及分位数</span>
                    <span class="industry-tab-count c-222"></span>
                </div>
                <div class="mb5">
                    <span class="industry-tab-name">PE(TTM)及分位数</span>
                    <span class="industry-tab-count c-222"></span>
                </div>
                <div>
                    <span class="industry-tab-name">ROE及分位数</span>
                    <span class="industry-tab-count c-222"></span>
                </div>
            </div>

            <div class="industry-charts-tab industry-charts-stock flex-row justify-content-between mt10">
                <!--<div class="industry-chart-tab industry-chart-active">久期分布</div>-->
                <!--<div class="industry-chart-tab">利差分布</div>-->
                <!--<div class="industry-chart-tab">FIQS评级</div>-->
            </div>
            <div class="industry-data-container industry-data-stock">


            </div>

        </div>

        <div class="industry-div-line"></div>

        <div style="height:7rem;width:7.5rem;">
            <img class="w-100-p h-100-p" src="../../images/research/industry-gp.png"/>

        </div>
        <div class="industry-more-tip  flex-column fs12 align-items-center">
            <div class="industry-more-info">登录JT²智管有方PC端，解锁更多行业专题信息</div>
            <div class="industry-more-jt">https://jt2.jd.com/index</div>

        </div>

    </div>
</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../js/dateConversion.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<script src="../../js/echarts.min.js"></script>
<script src="../../js/table-list.js"></script>
<script src="../../plugin/mescroll/js/mescroll.min.js"></script>


<script>
  let pm = {
      pageNum: 1,
      pageSize: 10,
      isScroll: true,
      title: '',
    },
    meScroll,
    bondInfo = [{name: '债券', subtopicCode: 'STP_INDUSTRY_STEEL_55'}, {
      name: '债券',
      subtopicCode: 'STP_INDUSTRY_COAL_01'
    }, {name: '债券', subtopicCode: 'STP_INDUSTRY_ESTATE_01'}], // 债券信息
    stockInfo = [{name: '股票', subtopicCode: 'STP_INDUSTRY_STEEL_58'}, {
      name: '股票',
      subtopicCode: 'STP_INDUSTRY_COAL_04'
    }, {name: '股票', subtopicCode: 'STP_INDUSTRY_ESTATE_04'}], // 股票信息
    bondList = [[{name: '久期分布', subtopicCode: 'STP_INDUSTRY_STEEL_56'},
      {name: '利率分布', subtopicCode: 'STP_INDUSTRY_STEEL_57'}, {name: 'FIQS评级', code: 'TP_INDUSTRY_STEEL'}],// 行业

    [{name: '久期分布', subtopicCode: 'STP_INDUSTRY_COAL_02'},
      {name: '利率分布', subtopicCode: 'STP_INDUSTRY_COAL_03'}, {name: 'FIQS评级', code: 'TP_INDUSTRY_COAL'}],  // 煤炭

    [{name: '久期分布', subtopicCode: 'STP_INDUSTRY_ESTATE_02'},
      {name: '利率分布', subtopicCode: 'STP_INDUSTRY_ESTATE_03'}, {name: 'FIQS评级', code: 'TP_INDUSTRY_ESTATE'}]//房地产
    ],
    // 股票信息
    stockList = [[{name: '净资产收益率与指数', subtopicCode: 'STP_INDUSTRY_STEEL_59'},
      {name: '销售净利润率与指数', subtopicCode: 'STP_INDUSTRY_STEEL_60'}, {name: '行业指数', subtopicCode: 'STP_INDUSTRY_STEEL_61'}],// 行业

    [{name: '净资产收益率与指数', subtopicCode: 'STP_INDUSTRY_COAL_05'},
      {name: '销售净利润率与指数', subtopicCode: 'STP_INDUSTRY_COAL_06'}, {name: '行业指数', subtopicCode: 'STP_INDUSTRY_COAL_07'}],//煤炭行业

    [{name: '净资产收益率与指数', subtopicCode: 'STP_INDUSTRY_ESTATE_05'},
      {name: '销售净利润率与指数', subtopicCode: 'STP_INDUSTRY_ESTATE_06'}, {name: '行业指数', subtopicCode: 'STP_INDUSTRY_ESTATE_07'}]] //房地产

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.type = params.type === '100' ? '0' : params.type === '101' ? '1' : params.type === '102' ? '2' : '0' //type  0、钢铁行业   1、煤炭行业   2、房地产
    pm.title = pm.type === '1' ? '煤炭行业' : pm.type === '2' ? '房地产行业' : '钢铁行业'

    $('.topic-detail-img img').attr('src', (pm.type === '1' ? '../../images/research/industry-mt.png' : pm.type === '2' ? '../../images/research/industry-fdc.png' : '../../images/research/industry-gt.png'))
    //dealPageInfo()
    pageScroll()

    meScroll = Template.createNoScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageNum,
      downCallback: dealPageInfo, //下拉刷新入口
      upCallback: '' //滚动加载入口
    })

  }

  function reLoadPage(){
    dealPageInfo()
  }

  // 处理页面信息
  function dealPageInfo() {
    $('.industry-charts-tab').html('')
    $('.industry-data-bond').html('')
    $('.industry-charts-bond').html('')

    getBondInfo(bondInfo[pm.type].subtopicCode)
    getStockInfo(stockInfo[pm.type].subtopicCode)

    //  处理上半部分的久期分布、利差分布、FIQS评级
    bondList[pm.type].forEach(function (item, index) {
      if (0 === index) {
        $('.industry-data-bond').append(`<div  id="chart_${item.subtopicCode}" class="industry-data-item"></div>`)
        $('.industry-charts-bond').append(`<div class="industry-chart-tab industry-chart-active flex-row align-items-center justify-content-center" onclick="changeTab('${item.subtopicCode}',this,0,1)"><div>${item.name}</div></div>`)
        changeTab(item.subtopicCode)
      } else {
        if (item.subtopicCode) {
          $('.industry-data-bond').append(`<div  id='chart_${item.subtopicCode}' class='industry-data-item' style="display: none;"></div>`)
          $('.industry-charts-bond').append(`<div class="industry-chart-tab flex-row align-items-center justify-content-center " onclick="changeTab('${item.subtopicCode}',this,0,1)"><div>${item.name}</div></div>`)
        } else {
          $('.industry-data-bond').append(`<div  id='chart_${item.code}' class='industry-data-item' style="display: none;"></div>`)
          $('.industry-charts-bond').append(` <div class="industry-chart-tab flex-row align-items-center justify-content-center" onclick="changeTab('${item.code}',this,1,1)"><div>${item.name}</div></div>`)
        }
      }
    })
    //  处理下半部分
    stockList[pm.type].forEach(function (item, index) {
      if (0 === index) {
        $('.industry-data-stock').append(`<div  id="chart_${item.subtopicCode}" class="industry-data-item"></div>`)
        $('.industry-charts-stock').append(`<div class="industry-chart-tab flex-row align-items-center justify-content-center industry-chart-active" onclick="changeTab('${item.subtopicCode}',this,0,2)"><div>${item.name}</div></div>`)
        changeTab(item.subtopicCode)
      } else {
        $('.industry-data-stock').append(`<div  id='chart_${item.subtopicCode}' class='industry-data-item' style="display: none;"></div>`)
        $('.industry-charts-stock').append(`<div class="industry-chart-tab flex-row align-items-center justify-content-center" onclick="changeTab('${item.subtopicCode}',this,0,2)"><div>${item.name}</div></div>`)
      }
    })
  }

  //切换 久期分布、利率分布
  function changeTab(subtopicCode, o, val, num) {
    if (o) {
      $('.industry-data-' + (num === 1 ? 'bond' : 'stock') + ' .industry-data-item').hide()
      $('#chart_' + subtopicCode).show()
      $('.industry-charts-' + (num === 1 ? 'bond' : 'stock') + ' .industry-chart-tab').removeClass('industry-chart-active')
      $(o).addClass('industry-chart-active')
    }
    if (val) { //处理fiqs评级
      if ($('#chart_' + subtopicCode).html() === '') {
        queryCompanyRateList(subtopicCode)
      }
    } else {
      if ($('#chart_' + subtopicCode).html() === '') {
        qrySubTopicDataSet(subtopicCode, subtopicCode)
      }
    }

  }

  // 获取图表数据信息
  function qrySubTopicDataSet(subtopicCode, mudeCode) {
    Server.industry.qrySubTopicDataSet({
      'data': [],
      'isFirstAccess': '1',
      'subtopicCode': subtopicCode,
    }).then(function (data) {
      // 处理图表信息
      dealChart(data.data, mudeCode)
    })
  }

  //债券分析基本信息
  function getBondInfo(subtopicCode) {
    Server.industry.qrySubTopicTableSet({
      'data': [],
      'isFirstAccess': '1',
      'subtopicCode': subtopicCode,
    }).then(function (data) {
      $('.industry-tab-count').eq(0).html((data.data.bondSize ? data.data.bondSize : '-') + '只') // 存量债券数量 data.data.bondSize
      $('.industry-tab-count').eq(1).html((data.data.weightedYtm ? data.data.weightedYtm.toFixed(2) : '-') + '%')// 加权到期收益率 weightedYtm
      $('.industry-tab-count').eq(2).html((data.data.bondAmountTotal ? data.data.bondAmountTotal : '-') + '亿')// 存量债券规模 bondAmountTotal
      $('.industry-tab-count').eq(3).html((data.data.avgTerm ? data.data.avgTerm.toFixed(2) : '-') + '年') // 平均久期  avgTerm
      $('.industry-tab-count').eq(4).html((data.data.bondSizeInYear ? data.data.bondSizeInYear : '-') + '只') // 近一年到期债券数量 bondSizeInYear
      $('.industry-tab-count').eq(5).html((data.data.bondAmountInYear ? data.data.bondAmountInYear : '-') + '只')// 近一年到期规模 bondAmountInYear
      $('.industry-tab-count').eq(6).html((data.data.bondRateAAPlus ? data.data.bondRateAAPlus : '-')) // AA级以上债券数量及占比  bondRateAAPlus
      meScroll.endSuccess()
    }).catch((error) => {
      jsBridge.log(error)
      meScroll.endErr()
    })
  }

  // 股票分析基本信息
  function getStockInfo(subtopicCode) {
    Server.industry.qryStockInfoBySubtopicCode({
      'data': [],
      'isFirstAccess': '1',
      'subtopicCode': subtopicCode,
    }).then(function (data) {
      $('.industry-tab-count').eq(7).html((data.data.companySize ? data.data.companySize : '-') + '个')// 上市公司数目 companySize
      $('.industry-tab-count').eq(8).html((data.data.totalCompanyValue ? data.data.totalCompanyValue.toFixed(4) : '-') + '亿') // 总市值 totalCompanyValue
      $('.industry-tab-count').eq(9).html(data.data.pbLf ? data.data.pbLf : '-') // PB（LF）及分位数   pbLf
      $('.industry-tab-count').eq(10).html(data.data.pbLmm ? data.data.pbLmm : '-')// PB(LMM)及分位数 pbLmm
      $('.industry-tab-count').eq(11).html(data.data.roe ? data.data.roe : '-')// ROE及分位数 roe
      // 近一年减持规模 downAmountInYear
      // 近一年融资规模 financeAmountInYear
    })
  }

  // 获取公司评估信息
  function queryCompanyRateList(code) {
    Server.industry.queryCompanyRateList({
      topicCode: code
    }).then(function (data) {
      if (data.data && data.data.length > 0) {
        let htmlStr = '<table class="industry-data-table"><tbody>'
        data.data.forEach(function (item, index) {
          if (index <= 5) {
            if (index === 0) {
              htmlStr += `<tr class="industry-data-first fs12">
                            <td class="industry-first-td line1 ta-left">${item.companyName}</td>
                            <td class="industry-data-pj ta-center">${item.originatorRating}</td>
                            <td class="industry-data-pj ta-right">${item.jdRating}</td>
                        </tr>`
            } else {
              htmlStr += `<tr class="industry-data-tr">
                        <td class="industry-data-mc pt10 pb10 line1 fs13 ta-left">${item.companyName ? item.companyName : '-'}</td>
                        <td class="pt10 pb10 ta-center">${item.originatorRating ? item.originatorRating : '-'}</td>
                        <td class="pt10 pb10 ta-right">${item.jdRating ? item.jdRating : '-'}</td>
                    </tr>`
            }
          }
        })
        htmlStr += `</tbody></table>`
        htmlStr += `<div class="flex-row justify-content-center pt10"><div class="industry-fiqs-more fs11" onclick="moreFiqs('${code}')">查看更多 ></div></div>`

        $('#chart_' + code).html(htmlStr)

      }

    })

  }

  //处理状态栏滚动效果
  function dealHead(scrollTop) {
    let currStop
    if (scrollTop < 64) {
      currStop = scrollTop
      $('.center-bar').html('')
      $('.left-bar').css({
        'color': 'rgb(255,255,255)'
      })
      $('.right-bar').css({
        'color': 'rgb(255,255,255)'
      })
    } else {
      currStop = 64
      $('.center-bar').html(pm.title)
      $('.left-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
      $('.right-bar').css({
        'color': 'rgba(34, 34, 34, ' + currStop / 64 + ')'
      })
    }
    $('.placeholder-top').css({
      'background': 'rgba(255, 255, 255, ' + currStop / 64 + ')'
    })

  }

  // 查看更多fiqs评级数据
  function moreFiqs(code) {
    jsBridge.openWindow('html/research/industry-fiqs.html?code=' + code, {}, {noBar: false})
  }

  /**
   * @param callback 翻页回调函数
   */
  function pageScroll() {
    $('.mescroll').scroll(function () {
      //需要特殊处理的滚动区域，需要放在scroller元素区域内
      let scrollTop = $(this).scrollTop()
      dealHead(scrollTop)
    })
  }


</script>
</html>
